<template>
	<view class="cul-wrapper">
		<!--这里减掉的60为操作栏的高度和内边距之和-->
		<scroll-view :style="{height:scrollHeight-70+'px'}" scroll-y :scroll-into-view="scrollIndex" scroll-with-animation>
			<block v-for="(msg,index) in msgs" :key="index">
				<view :class="[msg.isme?'msg-me':'msg-service']" :id="'msg-'+index">
					<image class="avatar" v-if="!msg.isme" :src="anotherAvatar" lazy-load></image>
					<view class="msg-text">
						<view class="msg-text-content">
							<text>{{msg.data}}</text>
						</view>
					</view>
					<image class="avatar" v-if="msg.isme" :src="meAvatar" lazy-load></image>
				</view>
			</block>
		</scroll-view>
		<view class="operation" :class="{'conversion':!conversion}">
			<input type="text" v-model="msgInput.msg1" :class="[conversion?'msg-input1':'msg-input2']" @tap="sub1(msgInput.msg2)" />
			<input type="text" v-model="msgInput.msg2" :class="[conversion?'msg-input2':'msg-input1']" @tap="sub2(msgInput.msg1)" />
		</view>
	</view>
</template>

<script>
	export default {
		name: 'CulChat',
		props: {
			//聊天窗体高度
			scrollHeight: {
				type: Number,
				default(){
					let height = 0
					//调用uni-app接口获取屏幕高度
					uni.getSystemInfo({
						//成功回调函数
						success(res) {
							//windoHeight为窗口高度，主要使用的是这个
							height = res.windowHeight
						}
					})
					return height
				}
			},
			meAvatar: {
				type: String
			},
			anotherAvatar: {
				type: String
			}
		},
		data() {
			return {
				//控制按钮和文本框样式和功能的转换
				conversion: true,
				msgInput: {
					msg1: '',
					msg2: ''
				},
				//消息列表
				msgs: [],
				//滚动位置
				scrollIndex: ''
			}
		},
		methods: {
			//滚动到指定位置
			jumpScroll() {
				//滚动到指定位置之前首先清空scrollIndex的值，否则只能滚动一次，再次调用就会失效
				this.scrollIndex = ''
				this.$nextTick(function() {
					this.scrollIndex = 'msg-' + (this.msgs.length - 1)
				})
			},
			sub1(val) {
				if (!this.conversion) {
					this.sub(val)
				}
			},
			sub2(val) {
				if (this.conversion) {
					this.sub(val)
				}
			},
			sub(val) {
				let _self = this;
				if (val) {
					//清空输入框中的文字
					this.msgInput.msg1 = ''
					this.msgInput.msg2 = ''
					let msg = {
						isme: true,
						data: val
					}
					this.msgs.push(msg)
					this.conversion = !this.conversion
					this.jumpScroll()
					this.$emit('submit', {
						message: val,
						callback: m => {
							let anotherMsg = {
								isme: false,
								data: m
							}
							_self.msgs.push(anotherMsg)
							_self.jumpScroll()
						}
					})
				} else {
					this.conversion = !this.conversion
					this.jumpScroll()
				}
			}
		}
	}
</script>

<style scoped>
	*{
		box-sizing: border-box;
		overflow: hidden;
	}
	.cul-wrapper {
		width: 100vw;
		padding: 0 35rpx;
		margin-top: 10px;
		box-sizing: border-box;
		background-color: #FFFFFF;
	}

	.msg-me,
	.msg-service {
		display: flex;
		align-items: flex-start;
		width: 680rpx;
		margin: 30rpx 0;
		box-sizing: border-box;
		overflow: hidden;
	}

	.msg-me {
		justify-content: flex-end;
	}

	.msg-service {
		justify-content: flex-start;
	}

	.avatar {
		width: 70rpx;
		height: 70rpx;
		border-radius: 50%;
	}

	.msg-text {
		width: 560rpx;
	}

	.msg-me>.msg-text {
		display: flex;
		justify-content: flex-end;
	}

	.msg-text-content {
		line-height: 35rpx;
		display: inline-block;
		box-sizing: border-box;
		padding: 30rpx;
		font-size: 28rpx;
	}

	.msg-me>.msg-text>.msg-text-content {
		margin-left: 70rpx;
		background-color: #FFFFFF;
		border: 1rpx solid #d5e0e5;
		border-top-right-radius: 20rpx;
		border-bottom-left-radius: 30rpx;
		border-top-left-radius: 10rpx;
		margin-right: 15rpx;
	}

	.msg-service>.msg-text>.msg-text-content {
		color: #FFFFFF;
		margin-left: 15rpx;
		background-color: #3875ff;
		border-top-left-radius: 20rpx;
		border-bottom-right-radius: 30rpx;
		border-top-right-radius: 10rpx;
		margin-right: 70rpx;
	}

	.operation {
		display: flex;
		position: fixed;
		left: 0;
		bottom: 0;
		align-items: center;
		background: #FFFFFF;
		padding: 10px 35rpx;
		border-top: 1rpx solid rgba(184, 184, 184, 0.1);
		width: 100vw;
	}

	.conversion {
		flex-direction: row-reverse;
		justify-content: flex-end;
	}

	.msg-input1 {
		background: #FFFFFF;
		height: 40px;
		width: 520rpx;
		border-radius: 10px;
		padding: 0 20rpx;
		border: 1rpx solid rgba(0, 0, 0, 0.1);
	}

	.msg-input2 {
		display: flex;
		align-items: center;
		width: 140rpx;
		margin-left: 30rpx;
		height: 40px;
		background-color: #007AFF;
		background-image: url('');
		background-repeat: no-repeat;
		background-position: center center;
		background-size: 20px 20px;
		border-radius: 10px;
		/*这个颜色是因为组件位置交换的时候，字体会有一瞬间继续留在框内，这里把内容变为透明即可*/
		color: rgba(0, 0, 0, 0);
	}
</style>
